<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="iconfont/download/iconfont.css">
    <title>小米商城</title>
    <!-- 设置网站图标 -->
    <link rel="icon" href="favicon.ico">
    <!-- 
        1、ico图标可以自己制作，搜索在线制作即可
        2、图标放在根目录下 ，命名为favicon.ico
        3、在网页中用link标签引入
    -->
</head>
<body>
    <header>
        <!-- 顶部广告 -->
            <a href="#" class="link-block">
                <div class="topbar-banner-Wrapper"></div>
            </a>
            <!-- 顶部导航条 -->
            <div class="topbar-site">
                <div class="topbar-container">
                    <div class="topbar-nav">
                        <a href="#">小米商城</a>
                        <span class="sep">|</span>
                        <a href="#">MIUI</a>
                        <span class="sep">|</span>
                        <a href="#">IoT</a>
                        <span class="sep">|</span>
                        <a href="#">云服务</a>
                        <span class="sep">|</span>
                        <a href="#">天星数科</a>
                        <span class="sep">|</span>
                        <a href="#">有品</a>
                        <span class="sep">|</span>
                        <a href="#">小爱开发平台</a>
                        <span class="sep">|</span>
                        <a href="#">企业团购</a>
                        <span class="sep">|</span>
                        <a href="#">资质证照</a>
                        <span class="sep">|</span>
                        <a href="#">协议规则</a>
                        <span class="sep">|</span>
                        <a href="#">下载app</a>
                        <span class="sep">|</span>
                        <a href="#">智能生活</a>
                        <span class="sep">|</span>
                        <a href="#">Select Location</a>
                        
                    </div>

                    <a href="#" class="miniCartTrigger">
                            <div>
                                <em class="iconfont icon-gouwuche"></em>
                                购物车
                                <span>(0)</span>
                                <div class="shopping-list">
                                    <ul>
                                        <li>
                                            <span>购物车中还没有商品，抓紧选购吧！</span>    
                                        </li>
                                    </ul>
                                </div>
                            </div>
                    </a>
                
                    <div class="info">
                        <a href="#">登录</a>
                        <span class="sep">|</span>
                        <a href="#">注册</a>
                        <span class="sep">|</span>
                        <a href="#">消息通知</a>
                    </div>
                    
                </div>
            </div>
<!-- 搜索栏 -->
            <div class="site-header">
                <div class="container">
                    <div class="header-logo">
                        <a href="#" class="logo"></a>
                    </div>
                    <div class="header-nav">
                        <ul class="nav-list">
                            <li class="nav-category">
                                全部商品分类
                                <div class="site-header-list">
                                    <ul class="site-list">
                                        <li><a href="#">手机 电话卡</a> <i class="iconfont icon-jiantou1"></i> </li>
                                        <li><a href="#">电视 盒子</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">笔记本 显示器</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">家电 插线板</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">出行 穿戴</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">智能 路由器</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">电源 配件</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">健康 儿童</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">耳机 音箱</a><i class="iconfont icon-jiantou1"></i></li>
                                        <li><a href="#">生活 箱包</a><i class="iconfont icon-jiantou1"></i></li>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-items active"><a href="#" class="link">小米手机</a></li>
                            <li class="nav-items active"><a href="#" class="link">Redmi红米</a></li>
                            <li class="nav-items active"><a href="#" class="link">电视</a></li>
                            <li class="nav-items active"><a href="#" class="link">笔记本</a></li>
                            <li class="nav-items active"><a href="#" class="link">家电</a></li>
                            <li class="nav-items active"><a href="#" class="link">路由器</a></li>
                            <li class="nav-items active"><a href="#" class="link">智能硬件</a></li>
                            <li class="nav-items"><a href="#" class="link">服务</a></li>
                            <li class="nav-items"><a href="#" class="link">社区</a></li>
                            
                            <form action="index.html" class="search">
                                <input type="text" name="keyword" autocomplete="off" placeholder="Redmi 10X 5G" class="keywords">
                                <button type="submit"><i class="iconfont icon-sousuo"></i></button>
                            </form>

                            <div class="hide-nav"></div>
                        </ul>
                        
                        
                    </div>
                    
                </div>
                
            </div>
    </header>

    <main>
        <div class="container">
            <a href="#">
                <img id="main-picture" src="img/adTV.webp" alt="">
            </a>
            <a href="#">
                <div class="arrow-left"><span class="iconfont icon-jiantou"></span></div>
                <div class="arrow-right"><span class="iconfont icon-jiantou1"></span></div>
            </a>
        
        <div>
            <ul class="fixed-bar">
                <li><a href="javascript:;"><i class="iconfont icon-weixiu"></i></a></li>
                <li><a href="javascript:;"><i class="iconfont icon-yonghutouxiang"></i></a></li>
                <li><a href="javascript:;"><i class="iconfont icon-kefu"></i></a></li>
                <li><a href="javascript:;"><i class="iconfont icon-icon"></i></a></li>
            </ul>
        </div>
        <div class="service w">
            <div class="short-cut">
                <ul class="ser-list">
                    <li><a href="javascript:;"><i class="iconfont icon-kefu"></i><span>客服</span></a></li>
                    <li><a href="javascript:;"><i class="iconfont icon-kefu"></i><span>客服</span></a></li>
                    <li><a href="javascript:;"><i class="iconfont icon-kefu"></i><span>客服</span></a></li>
                    <li><a href="javascript:;"><i class="iconfont icon-kefu"></i><span>客服</span></a></li>
                    <li><a href="javascript:;"><i class="iconfont icon-kefu"></i><span>客服</span></a></li>
                    <li><a href="javascript:;"><i class="iconfont icon-kefu"></i><span>客服</span></a></li>
                </ul>
            </div>
            <div class="ad"><a href="javascript:;"><img src="img/ser2.jpg" alt=""></a></div>
            <div class="ad"><a href="javascript:;"><img src="img/ser3.jpg" alt=""></a></div>
            <div class="ad"><a href="javascript:;"><img src="img/ser4.jpg" alt=""></a></div>
            
        </div>
        </div>

        

    </main>

    <footer>

    </footer>
</body>
</html>